<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.ort">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <style>
        body,html,#map{
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0px;
            font-family: "微软雅黑";
        }
        .layui-elem-quote{
            border-left: 5px solid #1e9fff;
        }
        .layui-form-select dl dd.layui-this {
            background-color: #1e9fff;
            color: #fff;
        }
    </style>
</head>
<body>
<input th:value="${lng}" id="lng" type="hidden">
<input th:value="${lat}" id="lat" type="hidden">
<!--打开地图-->
<div id="mapDiv">
    <div style="margin: 10px;position: absolute;z-index: 999">
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input lay-verify="required" th:value="${address}"
                               class="layui-input layui-border-blue" name="city" autocomplete="off" placeholder="请输入城市名称">
                    </div>
                    <div class="layui-input-inline" style="margin-left: -12px">
                        <a class="layui-btn layui-btn-normal" lay-submit="" lay-filter="search">
                            <i class="layui-icon layui-icon-search"></i>
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div id="map" style="height: 600px;z-index: 100"></div>
</div>

<script src="http://api.map.baidu.com/api?v=2.0&ak=tyjXNPZrFk5cyOIwnDErDqUKlyEOIZ1M"></script>
<script>
    var $,lng,lat,map;
    layui.use(['jquery','form','layer'],function(){
        $ = layui.jquery;
        var form = layui.form,layer = layui.layer;

        showMap();

        form.on('submit(search)',function (data) {
            var city =data.field.city;
            map.clearOverlays();
            var ls = new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});
            //ls.setPageCapaciity(100);
            ls.search(city);

        })

        form.on('submit(submitBtn)',function(data){
            var formData = data.field;
        })
    })

    function showMap() {
        lng = $('#lng').val(),lat = $('#lat').val()
        map = new BMap.Map('map');
        var point = new BMap.Point(lng,lat);//设置打开的坐标点
        map.centerAndZoom(point,18);
        map.enableScrollWheelZoom(true);//允许鼠标滚动缩放
        addMark(lng,lat);
        map.addEventListener('click',function (e) {
            lng = e.point.lng, 
            lat = e.point.lat;
            //清除其他的标注点
            map.clearOverlays();
            addMark(lng,lat);
        })
    }
    
    function addMark(lng,lat) {
        var point = new BMap.Point(lng,lat);
        var marker = new BMap.Marker(point);
        //添加到地图
        map.addOverlay(marker);
        //添加监听事件
        (function () {
            var thePoint = point;
            marker.addEventListener('click',function () {
                alert(1);
                showInfo(this,thePoint);
            })
        })
    }

    //显示信息
    function showInfo(thisMarker,point) {
        var content = '<ul style="margin: 0 0 5px 0;padding: 0.2em 0">' +
                          '<li style="line-height: 30px;font-size: 15px">' +
                                '<span style="width: 50px;display: inline-block;">商城名称:某某分销公司南宁分公司</span>' +
                          '</li>' +
                          '<li style="line-height: 30px;font-size: 15px">' +
                                '<span style="width: 50px;display: inline-block;"><a href="#">查看详情</a></span>' +
                           '</li>' +
                      '</ul>'
        var infoWin = new BMap.InfoWindow(content);
        thisMarker.openInfoWindow(infoWin);
    }
    
    
    function submitBtn() {
        var point = {"lng":lng,"lat":lat};
        let index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);//关闭父页面窗口
        return point;
    }
    //获取页面高度
    function setHeight(){
        var height = window.outerHeight-100;
        $('#map').css('height',height);
    }
</script>
</body>
</html>
